<template>
<div class="flow-info">
  <el-form label-position="left" label-width="100px" id="contentForm" enctype="multipart/form-data">
    <el-form-item v-show="false">
      <el-input v-model="detailData.id" name="id" readonly></el-input>
      <el-input v-model="detailData.nodeId" name="nodeId" readonly></el-input>
      <el-input v-model="detailData.preNodeId" name="preNodeId" readonly></el-input>
      <el-input v-model="detailData.mainId" name="mainId" readonly></el-input>
      <el-input v-model="detailData.rootNodeId" name="rootNodeId" readonly></el-input>
    </el-form-item>
    <el-form-item label="结点名">
     <div class="f-info">test结点名</div>
    </el-form-item>
    <el-form-item label="位置信息" class="hasMust">
      <div class="f-info">test位置信息</div>
    </el-form-item>
    <el-form-item label="显示类型" class="hasMust">
     <div class="f-info">test显示类型</div>
    </el-form-item>
    <el-form-item label="背景图片">
      <el-upload
        class="upload-img"
        list-type="picture-card"
        action="#"
        multiple
        :limit="1"
        :file-list="fileList"
        name="picfile"
        :before-remove="beforeRemove"
      >
      </el-upload>
      <el-input v-model="uploadUrl" v-show="false" name="url"></el-input>
      <el-input :value="fileList.length>0?fileList[0].name:fileList" v-show="false" name="fileName"></el-input>
    </el-form-item>

    <el-form-item label="显示文本" class="hasMust">
      <div class="f-info">test文本</div>
    </el-form-item>
      <el-form-item label="标准问">
        <div class="f-info">test标准问</div>
      </el-form-item>
    <el-form-item label="是否显示" class="hasMust">
        <div class="f-info">是</div>
    </el-form-item>
      <el-form-item label="附件">
          <el-col :span="24">
             <p v-for="item in files" :key="item.id" class="files-item">{{item.name}}</p>
          </el-col>

      </el-form-item>

      <!-- 折叠面板 -->
    <el-collapse v-model="likeProblem">
      <el-collapse-item name="1">
        <template slot="title">
          <i class="header-icon el-icon-d-caret" style="color:#1B9BFC;font-weight:600px;">相似问法</i>
        </template>
        <el-form-item label-width="0" >
          <div class="f-info box-margin ">test相似问1</div>
          <div class="f-info box-margin">test相似问2</div>
        </el-form-item>

      </el-collapse-item>
      <el-collapse-item name="2">
        <template slot="title">
          <i class="header-icon el-icon-d-caret" style="color:#1B9BFC;font-weight:600px;">通配问法</i>
        </template>
        <el-form-item label-width="0" >
         <div class="f-info box-margin">test通配问</div>
          </el-input>
        </el-form-item>
      </el-collapse-item>
    </el-collapse>
      <el-card class="box-card">
          <el-form-item label="答案类型" class="hasMust">
            <div class="f-info">文本</div>
          </el-form-item>
          <el-form-item label="答案内容">
              <div class="f-info">test答案内容</div>
          </el-form-item>
          <el-form-item label="适用终端">
             <div class="f-info">标签1</div>
          </el-form-item>
      </el-card>
  </el-form>
</div>
</template>
<script>
    export default {
        name: "flowInfo",
        props:{
            nodeData:{
                type:[Object,Array],
                default:[]
            }
        },
        components: {},
        data(){
            return {
                files:[
                    {id:1,name:"test1.png"},
                    {id:2,name:"test2.png"}
                ],
              detailData:{},//详情数据
              name:"HelloWorld",//详情名称.
               showType:1,//详情显示类型
              showTypeList:[{id: 1, label: '按钮'},{id: 3, label: '文本'}],//详情显示类型列表
              fileList:[],//详情背景图片上传列表
              nodeEntryProblem:"",//节点入口问题
              uploadUrl:"",//上传url
              showText:"我是显示文本",//详情显示文本
              showRadio:"1",//详情里面的是否显示
              likeProblem:[],//选择节点模态框里面的相似问题,
              nodeDetailShow:false,//控制详情页面的显示和隐藏
            }
        },
        methods: {
            beforeRemove(){
                return false
            }
        },
        computed: {

        },
        watch: {

        },
    }
</script>
<style scoped="scoped">
    .node-info-btn{
        text-align: left;
        padding-top:30px;
    }
    .content-footer{
        display:inline-block;
        margin-top:10px;
    }
    .files-item{
        height: 30px;
        line-height: 30px;
        margin-bottom:0;
        text-align:left;
    }
    .box-card{
        position: relative;
        width: 80%;
        margin-top:20px;
        margin-left:10px;
    }
    .box-margin{
        padding-left:20px;
    }

</style>
